@use 'common/var'as *;

:root {
  @each $name in map-keys($dis-map) {
    --dis-#{$name}: #{map-get($dis-map, $name)};
  }

  #{getElNS(font-weight-primary)}: 400;
}


@each $name in map-keys($dis-map) {
  $value: map-get($dis-map, $name);

  .#{getNS('mt', $name)} {
    margin-top: $value;
  }

  .#{getNS('mr', $name)} {
    margin-right: $value;
  }

  .#{getNS('mb', $name)} {
    margin-bottom: $value;
  }

  .#{getNS('ml', $name)} {
    margin-left: $value;
  }

  #{getNS('margin', $name)} {
    margin: $value;
  }

  #{getNS('margin-h', $name)} {
    margin-left: $value;
    margin-right: $value;
  }

  #{getNS('margin-v', $name)} {
    margin-top: $value;
    margin-bottom: $value;
  }

  .#{getNS('pt', $name)} {
    padding-top: $value;
  }

  .#{getNS('pr', $name)} {
    padding-right: $value;
  }

  .#{getNS('pb', $name)} {
    padding-bottom: $value;
  }

  .#{getNS('pl', $name)} {
    padding-left: $value;
  }

  .#{getNS('padding', $name)} {
    padding: $value;
  }

  .#{getNS('padding-h', $name)} {
    padding-left: $value;
    padding-right: $value;
  }

  .#{getNS('padding-v', $name)} {
    padding-top: $value;
    padding-bottom: $value;
  }
}

@each $name in map-keys($color-map) {
  $value: map-get($color-map, $name);

  .#{getNS('c', $name)} {
    color: $value !important;
  }
}

.#{getNS('align-l')} {
  text-align: left;
}

.#{getNS('align-c')} {
  text-align: center;
}

.#{getNS('align-r')} {
  text-align: right;
}

.#{getNS('fr')} {
  float: right;
}

.#{getNS('fl')} {
  float: left;
}

.#{getNS('clearfix')} {
  @extend %clearfix;
}

.#{getNS('ellipsis')} {
  @extend %ellipsis;
}

.#{getNS('text-c-primary')} {
  color: getElVar(text-color-primary) !important;
}

.#{getNS('text-c-regular')} {
  color: getElVar(text-color-regular) !important;
}

.#{getNS('text-c-secondary')} {
  color: getElVar(text-color-secondary) !important;
}

.#{getNS('text-c-placeholder')} {
  color: getElVar(text-color-placeholder) !important;
}

.#{getNS('text-c-disabled')} {
  color: getElVar(text-color-disabled) !important;
}
